{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .layui-layer-content iframe {
        padding: 25px;
        box-sizing: border-box;
        height: 500px !important;
    }

    .ns-goods-intro {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .ns-goods-img {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        margin-right: 10px;
    }

    .ns-goods-img img {
        max-width: 100%;
        max-height: 50px;
    }

    .layui-table-view .layui-table[lay-size=lg] td .layui-table-cell {
        height: auto;
        line-height: 25px;
    }

    .contraction span {
        cursor: pointer;
        display: inline-block;
        width: 17px;
        height: 17px;
        text-align: center;
        line-height: 14px;
        user-select: none;
    }

    .sku-list {
        overflow: hidden;
        padding: 0 45px;
    }

    .sku-list li .img-wrap {
        vertical-align: middle;
        margin-right: 8px;
        width: 120px;
        height: 120px;
        text-align: center;
        line-height: 120px;
    }

    .sku-list li .img-wrap img {
        max-width: 100%;
        max-height: 100%;
    }

    .sku-list li .info-wrap span.sku-name {
        -webkit-line-clamp: 2;
        margin-bottom: 5px;
    }

    .sku-list li .info-wrap span {
        display: -webkit-box;
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .sku-list li {
        float: left;
        display: flex;
        padding: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #EFEFEF;
        width: 294px;
        height: 120px;
        align-items: center;
    }

</style>
{/block}
{block name="main"}

<div class="layui-collapse ns-tips">
    <div class="layui-colla-item">
        <ul class="layui-colla-content layui-show">
            <li>时间：{:time_to_date($info.start_time)} -- {:time_to_date($info.end_time)}</li>
            <li>专题活动名称：￥{$info.topic_name}</li>
            <li>活动内容：{$info.remark}</li>
        </ul>
    </div>
</div>

<!-- 搜索框 -->
<div class="ns-single-filter-box">
    <button class="layui-btn ns-bg-color" onclick="addGoods({$topic_id})">添加商品</button>

    <div class="layui-form">
        <div class="layui-input-inline">
            <input type="text" name="goods_name" placeholder="请输入商品名称" class="layui-input" autocomplete="off">
            <button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
                <i class="layui-icon">&#xe615;</i>
            </button>
        </div>
    </div>
</div>

<table id="good_list" lay-filter="good_list"></table>

<!-- 商品 -->
<script type="text/html" id="goodIntro">
    <div class="ns-table-title">

        <div class="contraction" data-id="{{d.goods_id}}" data-open="0">
            <span>+</span>
        </div>

        <div class="ns-title-pic">
            {{# if(d.goods_image){ }}
            <img layer-src src="{{ns.img(d.goods_image.split(',')[0])}}"/>
            {{# } }}
        </div>
        <div class="ns-title-content">
            <a href="javascript:;" class="ns-multi-line-hiding ns-gn-color" title="{{d.goods_name}}">{{d.goods_name}}</a>
        </div>
    </div>
</script>

<!--时间-->
<script type="text/html" id="times">
    <div class="layui-elip">开始：{{ns.time_to_date(d.start_time)}}</div>
    <div class="layui-elip">结束：{{ns.time_to_date(d.end_time)}}</div>
</script>

<!--操作-->
<script type="text/html" id="action">
    <div class="ns-table-btn">
        <a class="layui-btn" lay-event="edit">编辑</a>
        <a class="layui-btn" lay-event="delete">删除</a>
    </div>
</script>

<!-- 商品sku -->
<script type="text/html" id="skuList">
	<tr class="js-list-{{d.index}}" id="sku_img_{{d.index}}">
		<td colspan="10">
			<ul class="sku-list">
				{{# for(var i=0; i<d.list.length; i++){ }}
				<li>
					<div class="img-wrap">
						<img layer-src src="{{ns.img(d.list[i].sku_image)}}">
					</div>
					<div class="info-wrap">
						<span class="sku-name" title="{{d.list[i].sku_name}}">{{d.list[i].sku_name}}</span>
						<span class="price">商品价格：￥{{d.list[i].price}}</span>
						<span class="price">专题价格：￥{{d.list[i].topic_price}}</span>
					</div>
				</li>
				{{# } }}
			</ul>
		</td>
	</tr>
</script>

{/block}
{block name="script"}
<script>
    var laytpl;
    var topic_id = "{$info.topic_id}";
    $(function () {
        $("body").on("click", ".contraction", function () {

            var goods_id = $(this).attr("data-id");
            var open = $(this).attr("data-open");
            var tr = $(this).parent().parent().parent().parent();
            var index = tr.attr("data-index");
            if (open == 1) {
                $(this).children("span").text("+");
                $(".js-list-" + index).remove();
            } else {
                $(this).children("span").text("-");
                $.ajax({
                    url: ns.url("topic://shop/topic/getSkuList"),
                    data: {goods_id: goods_id,topic_id:topic_id},
                    dataType: 'JSON',
                    type: 'POST',
                    async: false,
                    success: function (res) {

                        var sku_list = $("#skuList").html();
                        var data = {
                            list: res.data,
                            index: index
                        };
                        laytpl(sku_list).render(data, function (html) {
                            tr.after(html);
                        });
                        layer.photos({
                            photos: '.img-wrap',
                            anim: 5
                        });
                    }
                });
            }
            $(this).attr("data-open", (open == 0 ? 1 : 0));
        });

        var form, table;
        layui.use(['form', 'laytpl'], function () {

            form = layui.form;
            laytpl = layui.laytpl;
            var repeat_flag = false, //防重复标识
                arr_id_good = [];
            form.render();

            table = new Table({
                elem: '#good_list',
                url: '{:addon_url("topic://shop/topic/goodslist")}',
                where: {
                    topic_id: {$topic_id}
                },
                cols: [
                    [{
                        title: '商品',
                        unresize: 'false',
                        templet: '#goodIntro',
                        width: '35%'
                    }, {
                        field: 'price',
                        title: '商品原价',
                        unresize: 'false',
                        templet: function (data) {
                            return '<span style="padding-right: 15px;">￥' + data.price + '</span>';
                        }
                    }, {
                        field: 'topic_price',
                        title: '专题价格',
                        unresize: 'false',
                        templet: function (data) {
                            return '<span style="padding-right: 15px;">￥' + data.topic_price + '</span>';
                        }
                    }, {
                        title: '操作',
                        width: '8%',
                        toolbar: '#action',
                        unresize: 'false'
                    }]
                ]
            });

            /**
             * 搜索功能 控制器沒有增加名称搜索字段
             */
            form.on('submit(search)', function (data) {
                table.reload({
                    page: {
                        curr: 1
                    },
                    where: data.field
                });
            });

            /**
             * 监听工具栏操作
             */
            table.tool(function (obj) {
                var data = obj.data,
                    event = obj.event;
                switch (obj.event) {
                    case 'edit': //查看
                        location.href = ns.url('topic://shop/topic/edit', {topic_id: data.topic_id, goods_id: data.goods_id});
                        break;
                    case 'delete': //删除
                        deleteGoods(data.goods_id, data.topic_id);
                        break;
                }
            });

            /**
             * 删除
             */
            function deleteGoods(goods_id, topic_id) {
                if (repeat_flag) return false;
                repeat_flag = true;

                layer.confirm('确定要删除该商品吗?', function () {
                    $.ajax({
                        url: '{:addon_url("topic://shop/topic/delete")}',
                        data: {
                            "goods_id": goods_id,
                            "topic_id": topic_id
                        },
                        dataType: 'JSON',
                        type: 'POST',
                        success: function (res) {
                            layer.msg(res.message);
                            repeat_flag = false;

                            if (res.code == 0) {
                                table.reload();
                            }
                        }
                    });
                });
            }
        });

    });

    function addGoods(topic_id) {
        location.href = ns.url('topic://shop/topic/add', {topic_id: topic_id});
    }
</script>
{/block}